<template>
  <div class="TeacherManagement">
    <div class="TeacherManagement-top">
      <div class="info">
        <div class="teacherName">
          <p class="teacherNameText">姓名：</p>
          <el-input
            v-model="teacherNameValue"
            placeholder="请输入姓名"
          ></el-input>
        </div>
        <div class="certificatesName">
          <p class="certificatesNameText">证件号码：</p>
          <el-input
            v-model="certificatesNumValue"
            placeholder="请输入证件号码"
          ></el-input>
        </div>
        <div class="post">
          <p>岗位：</p>
          <el-select v-model="postValue" @change="changePost" placeholder="请选择所岗位">
            <el-option
              v-for="item in postOptions"
              :key="item.typeId"
              :label="item.typeName"
              :value="{value:item.typeId,label:item.typeName}"
            >
            </el-option>
          </el-select>
        </div>
        <!-- <div class="subject">
          <p>学科：</p>
          <el-select v-model="subjectValue" placeholder="请选择学科">
            <el-option
              v-for="item in subjectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div> -->
        <div class="EmploymentStatus">
          <p>任职状态：</p>
          <el-select v-model="EmploymentStatusValue" placeholder="请选择任职状态">
            <el-option
              v-for="item in EmploymentStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="moreBtn">
          <el-button
            type="primary"
            @click="searchBtn"
            class="searchBtn"
            icon="el-icon-search"
            >搜索</el-button
          >
          <el-button
            type="primary"
            @click="refreshBtn"
            class="refreshBtn"
            icon="el-icon-refresh"
            >重置</el-button
          >
        </div>
      </div>
    </div>
    <div class="TeacherManagement-content">
      <div class="renderTable">
        <div class="renderTable-top">
          <div class="tableRight-title">
            <p>管理列表</p>
          </div>
          <div class="tableTopMoreBtn">
            <el-button type="primary" class="newAdd" @click="addBtn">
              <i class="el-icon-plus"></i>
              新增
            </el-button>
            <el-upload class="importBtn" name="file" action="action" :show-file-list="false" :http-request="fileChange">
                <el-button type="primary" class="daoru">
                    <span class="icon iconfont icon-daoru"></span>
                    导入
                </el-button>
            </el-upload>
            <el-button
              type="primary"
              class="exportBtn"
              @click="exportBtn"
            >
              <!-- <i class="el-icon-s-promotion"></i> -->
                <span class="icon iconfont icon-daochu"></span>
              导出
            </el-button>
            <el-button type="primary" class="moreDelete" @click="moreDelete">
              <i class="el-icon-close"></i>
              批量删除
            </el-button>
            <!-- <el-button
              type="primary"
              class="moreRelease"
              @click="batchRelease"
            >
              <i class="el-icon-s-promotion"></i>
              批量发布
            </el-button> -->

          </div>
        </div>
        <div class="table-bottom">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :header-cell-style="{ textAlign: 'center', background: '#f3f8fc' }"
            :cell-style="{ textAlign: 'center' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column prop="teacherName" label="姓名" width="100"> </el-table-column>
            <el-table-column prop="gender" label="性别" width="50" :formatter="sfktFormate"></el-table-column>
            <el-table-column prop="identificationType" label="证件类型"  width="90">
            </el-table-column>
            <el-table-column
              prop="idCardNo"
              label="证件号码"
              width="200"
            >
            </el-table-column>
            <el-table-column prop="colleageName" label="就职学校" width="100">
            </el-table-column>
            <el-table-column prop="concact" label="联系方式" width="150"> </el-table-column>
            <el-table-column prop="email" label="邮箱" width="190"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="200">
            </el-table-column>
            <el-table-column prop="employmentStatus" :formatter="employmentStatus" label="任职状态">
            </el-table-column>
            <el-table-column prop="sysStatus" label="系统状态" width="90">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.sysStatus"
                  active-color="#13ce66"
                  inactive-color="#C2C2C2"
                  active-value="0"
                  inactive-value="1"
                  @change="changeSwitch(scope.row)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="160">
              <template slot-scope="scope">
                <div class="mm">
                  <!-- <div>
                    <img
                      class="suo"
                      src="../../assets/educational-img/suo.png"
                      alt=""
                    />
                  </div> -->
                  <div>
                    <span class="icon edit" @click="editBtn(scope.row)">编辑</span>
                    <span class="icon del" @click="handleDelete(scope.row)">删除</span>
                    <!-- <img
                      class="edit"
                      @click="editBtn(scope.row)"
                      src="../../assets/edit.png"
                      alt=""
                    />
                  </div>
                  <div>
                    <img
                      class="del"
                      @click="handleDelete(scope.row)"
                      src="../../assets/del.png"
                      alt=""
                    /> -->
                  </div>
                  <p class="look" @click="lookBtn(scope.row)">查看详情</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block" v-show="tableData.length">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="10"
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper"
            ref="pagination"
            :total="total"
          >
          </el-pagination>
          <el-button class="sure" type="primary">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getTeacherListDataApi,
  removeTeacherApi,
  exportApi,
  editTeacherApi,
  getPostListApi,
  ImportExaminationRoomApi
  // getTeacherItemApi
  // editTeacherApi
  // removeTeacherApi
} from "@/api/educational/teacherManagement"
import {
getClassifyListApi
} from "@/api/basics/classify"
export default {
  name: "TeacherManagement",
  data() {
    return {
      // 教师姓名
      teacherNameValue: "",
      // 证件
      certificatesNumValue: "",
      // 岗位
      postValue: "",
      // 学科
      subjectValue: "",
      // 任职状态
      EmploymentStatusValue: "",
      // 岗位数据
      postOptions: [],
      // 学科数据
      subjectOptions: [],
      // 任职状态数据
      EmploymentStatusOptions: [
        {
          label:"在职",
          value:"0",
        },
        {
          label:"离职",
          value:"1",
        }
      ],
      // table数据
      tableData: [],
      // 显示当前第几页
      currentPage3: 1,
      total:0, // 总条数
      isLook:'',
      ids:'',
      filename:'教师管理表',
      postName:'',
      classify:[]

    };
  },
  watch:{
    '$route':function(newVal){
        console.log(newVal);
        if(newVal.name === "TeacherManagement") {
          this.getTeacherListData({pageSize:'10',pageNum:this.currentPage3})
        }
      },
      immediate: true,
      deep: true,
  },
  mounted() {
    getClassifyListApi({parentId:139}).then(res=>{
      this.classify = res.rows
    })
    this.getTeacherListData({pageSize:'10',pageNum:this.currentPage3})
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳到第";
    // getTeacherItemApi({id:2}).then((res)=>{
    //   console.log(res);
    // })
    getPostListApi({parentId:171}).then(res=>{
      console.log(res);
      this.postOptions = res.rows
    })
  },
  methods: {
    // 根据0/1判断男女
    sfktFormate(row){
      // console.log(row);
      if (row.gender == '1') {
        return "男";
      } else if(row.gender == '0'){
        return "女";
      }
    },
    employmentStatus(row) {
      if (row.employmentStatus == '0') {
        return "在职";
      }else {
        return "离职";
      }
    },
    // 删除教师
    handleDelete(row) {
      console.log(row);
      
      this.$confirm("确认删除记录吗?", "提示", {
          type: "warning",
        }).then(() => {
          removeTeacherApi({ids:row.id}).then((res) =>{
            if(res.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功',
              });
            this.getTeacherListData({pageSize:'10',pageNum:this.currentPage3})

            }else {
              this.$message({
                type: 'error',
                message: '删除失败',
              });
            }
          })
        }).catch(() => {
          
        });
     
    },
    // 获取教师列表
     getTeacherListData(teacherData) {
      
      getTeacherListDataApi(teacherData).then(res=>{
        this.tableData = res.rows
        this.total = res.total
        
        this.tableData.forEach(item=>{
          this.classify.forEach(ite=>{
            if(item.identificationType == ite.typeId) {
              item.identificationTypeName = ite.typeName
            }
          })
        })
      })
    
      
      
    },
    // 修改教师信息
    editBtn(row) {
      console.log(row,'=========');
      this.$router.push({
        path:"/educational/addteacher",
        name:"Addteacher",
        params:{
          rowId:row.id,
          isLookInfo:'1'
        }
      });
    },
    // 分页  事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getTeacherListData({pageSize:'10', pageNum:this.currentPage3})
    },
    // 搜索按钮
    async searchBtn() {
      let obj = {
        teacherName:this.teacherNameValue,
        idCardNo:this.certificatesNumValue,
        // postValue:this.postValue,
        employmentStatus:this.EmploymentStatusValue,
        pageSize:'10',
        pageNum:this.currentPage3,
        teacherPosts:this.postName
      }
      const data = await this.getTeacherListData(obj)
      console.log(data);
    },
    // 重置按钮
    refreshBtn() {
      this.teacherNameValue = ''
      this.certificatesNumValue = ''
      this.postValue = ''
      this.subjectValue = ''
      this.EmploymentStatusValue = ''
      this.certificatesNumValue = ''
      this.getTeacherListData({pageSize:'10',pageNum:this.currentPage3})
    },

    changePost(val) {
      this.postName = val.label
    },
    changeSwitch(row) {
      console.log(row);
      editTeacherApi({id:row.id,sysStatus:row.sysStatus}).then(res=>{
        console.log(res);
        if(res.code === 200) {
            this.$message({
              type: 'success',
              message: '修改成功',
            });
            this.getTeacherListData({pageSize:'10',pageNum:this.currentPage3})
          }else{
             this.$message({
              type: 'error',
              message: '修改失败',
            });
          }
      })
    },

    // 批量删除
    async moreDelete() {
      console.log(this.ids);
      this.$confirm("确认删除记录吗?", "提示", {
        type: "warning",
      }).then(() => {
        removeTeacherApi({ids:this.ids}).then(res=>{
          if(res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功',
            });
            this.getTeacherListData({pageSize:'10',pageNum:this.currentPage3})
          }else{
             this.$message({
              type: 'error',
              message: '删除失败',
            });
          }
        })
      });
      
    },

    fileChange(files) { 
        let formData = new FormData(); 
        formData.append('file', files.file);
        ImportExaminationRoomApi(formData).then((res) => {
          console.log(res);
          if(res.code === 200) {
            this.$message({
              type: 'success',
              message: '导入成功',
            });
            this.getTeacherListData({pageSize:'10',pageNum:this.currentPage3})
          }else {
            this.$message({
              type: 'error',
              message: '导入失败',
            });
          }
        });
    },

    // 查看教师信息 跳转页面
    lookBtn(row) {
      this.isLook = true
      console.log(row,'-------');
      this.$router.push({
        name:"Addteacher",
        path:"/educational/addteacher",
        params:{
          rowId:row.id,
          isLookInfo:'2'
        }
      });
    },
    // 新增教师信息
    addBtn() {
      this.$router.push({
        name:"Addteacher",
        path:"/educational/addteacher",
        params:{
          rowId:'0',
          isLookInfo:'3'
        }
      });
      sessionStorage.removeItem('postList')
    },
    // 导入教师
    importBtn() {},
    // 导出名单
    exportBtn() {
      // exportApi().then((res)=>{
      //   this.$confirm("是否导出全部数据？", "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   })
      //     .then(() => {
      //         const a = document.createElement("a"); //创建a标签
      //         a.href = `${HOST}/common/download?fileName=${res.msg}`; // 指定下载链接
      //         a.click(); //触发下载
      //     })
      //     .catch(() => {});
      // })
      this.$confirm("是否导出全部数据？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
              exportApi().then((res)=>{
                console.log(res)
                if (!res) return;
                const blob = new Blob([res], {
                  type: "application/vnd.ms-excel",
                }); // 构造一个blob对象来处理数据，并设置文件类型
                if (window.navigator.msSaveOrOpenBlob) {
                  //兼容IE10
                  navigator.msSaveBlob(blob, this.filename);
                } else {
                  const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
                  const a = document.createElement("a"); //创建a标签
                  a.style.display = "none";
                  a.href = href; // 指定下载链接
                  a.download = this.filename; //指定下载文件名
                  console.log(this.filename);
                  a.click(); //触发下载
                  URL.revokeObjectURL(a.href); //释放URL对象
                }
              })
              // const a = document.createElement("a"); //创建a标签
              // a.href = `${HOST}/common/download?fileName=${res.msg}`; // 指定下载链接
              // a.click(); //触发下载
          })
          .catch(() => {});
    },
    // 复选框事件
    handleSelectionChange(val) {
      console.log(val);
      var arrTostring = [];
        val.forEach((item) => {
          if (arrTostring.indexOf(item.id) === -1) {
            arrTostring.push(item.id);
          }
        });
        this.checkedList = val
        this.ids = arrTostring.toString();
        console.log(this.ids,'------');
    },
  }
};
</script>

<style lang="scss" scoped>
.TeacherManagement {
  min-width: 100vh;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  box-sizing: border-box;
  .TeacherManagement-top { 
    width: 100%; 
    padding: 0 10px 10px 10px;
    box-shadow: 0 1px 5px #ccc;
    border-radius: 5px; 
    background-color: #fff;
    .info {
      width: 100%; 
      display: flex;
      flex-wrap: wrap; 
      align-items: center;
      min-width: 100vh;
      ::v-deep .el-input {
        width: 130px;
      }
      ::v-deep .el-select {
        width: 130px;
      }
      .teacherName,
      .certificatesName,
      .post,
      .subject,
      .EmploymentStatus {
        // width: 230px;
        // float: left;
        display: flex;
        margin: 20px 0 20px 10px;
        align-items: center;
        p{
          font-size: 14px;
          width: 50px;
        }
      }
      .certificatesName {
        // width: 250px;
        display: flex;
        p {
          width: 70px;
        }
      }

      .EmploymentStatus {
        display: flex;
        // width: 260px;
        p {
          width: 70px;
        }
      }
      .moreBtn {
        display: flex;
        margin-left: 10px;
        width: 200px;
        .searchBtn {
          color: white;
          border: none;
          background-color: rgb(123, 180, 208);
        }
        .refreshBtn {
          color: white;
          border: none;
          background-color: rgb(108, 207, 204);
        }
      }
    }
  }
  .TeacherManagement-content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 0 10px;
    margin-top: 10px;

    .renderTable {
      width: 100%; 
      display: flex;
      flex-direction: column;
      .renderTable-top {
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tableRight-title {
          font-size: 16px;
          color: rgb(57, 141, 220);
          font-weight: 600;
        }
        .tableTopMoreBtn {
          width: 600px;
          display: flex;
          justify-content: right;
          button {
            border: none;
          }
          .newAdd {
            background-color: rgb(86, 164, 212);
          }
          .moreDelete {
            background-color: rgb(241, 129, 143);
          }
          .moreRelease {
            text-align: center;
            background-color: rgb(127, 162, 216);
            .shareImg {
              width: 15px;
              height: 15px;
              margin-top: -3px;
              background: #fff;
            }
            ::v-deep .el-icon-s-promotion {
              color: white;
            }
          }
          .importBtn{
            background-color: #66c8e3;
            border-radius: 5px;
            margin: 0 10px;
            .daoru{
              background-color: #66c8e3;
            }
          }
          .exportBtn {
            background-color: #fabd90;
          }
        }
      }
      .table-bottom {
        width: 100%;
        // height: 100%;
        flex: 1;
        overflow-y: auto;
        .mm {
          width: 160px;
          display: flex;
          align-items: center;
          // justify-content: space-around;
          // line-height: 20px;
          padding: 0 10px;
          // div {
          //   width: 30px;
          // }
          .edit{
            color: #1990FF;
            cursor: pointer;
          }
          .del{
            color: #1990FF;
            margin-left: 10px;
            cursor: pointer;
          }
          .look {
            cursor: pointer;
            width: 70px;
            // margin-left: 10px;
            color:rgb(135, 173, 218);
          }
        }
      }

    }
  }
  .block {
        width: 100%;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: right;
        // background-color: #fff;

        ::v-deep .btn-prev {
          border: solid 1px #e6e6e6;
          border-radius: 5px;
          color: #6f6f6f;
        }

        ::v-deep .btn-next {
          border: solid 1px #e6e6e6;
          border-radius: 5px;
          color: #6f6f6f;
        }

        ::v-deep .el-pager li {
          background: #fff;
          font-size: 13px;
          min-width: 30.5px;
          height: 28px;
          line-height: 28px;
          box-sizing: border-box;
        }

        ::v-deep .el-pager li.active {
          background-color: #4895db;
          color: #fff;
          cursor: default;
        }
        ::v-deep .number {
          border: solid 1px #e6e6e6;
          margin: 0 5px;
          border-radius: 5px;
          color: #6f6f6f;
        }
        ::v-deep .el-button {
          // width: 50px;
          height: 28px;
          line-height: 0;
          margin-right: 10px;
        }
        .sure {
          width: 50px;
          height: 30px;
          line-height: 0;
          text-align: center;
          padding: 0;
        }
      }
}
</style>